<div class="modal fade" id="introModal" tabindex="-1" role="dialog" aria-labelledby="introModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <a href="{{userwebUrlPrefix}}/home"
           target="_blank"
           style="display:inline-block; position:relative; left:-3px; margin-right:7px; z-index:5" class="pull-left">
          <img ng-src='{{staticAssetsPrefix}}images/wwtlogo.png'
               style="width:110px; height:110px;"
               localize="WorldWide Telescope Logo"
               localize-only="alt" />
        </a>

        <h1 style="position: relative; top: 10px; white-space: nowrap">
          World<span style="color:#6ba9e6">Wide Telescope</span>
        </h1>

        <div class="clear"></div>

        <p style="margin-top: 60px;">Welcome to WorldWide Telescope!</p>

        <ul>
          <li localize="Move around the sky by clicking and dragging."></li>
          <li localize="Zoom in/out by scrolling the mouse wheel or pressing +/-."></li>
          <li localize="Right-click in the view to display the Finder Scope for more information."></li>
          <li localize="Menu tabs (“Explore”, “Guided Tours”, etc.) have two parts. Click the tab’s top to open a pane; click the tab’s bottom to open a submenu."></li>
        </ul>

        <h3 localize="Help Support WWT!"></h3>

        <p>WWT is a fiscally sponsored project of <a
        href="https://numfocus.org/">NumFOCUS</a>, a nonprofit dedicated to
        supporting the open-source scientific computing community. If you like
        WWT and want to support our mission, please consider making a
        tax-deductible donation to support our efforts.</p>

        <p class="text-center">
          <a class="btn" href="https://numfocus.org/donate-for-worldwide-telescope" target="_blank">Support WWT ❤️</a>
        </p>

        <p localize="To return to this screen, click the Explore menu and choose Show Welcome Tips."></p>

        <div ng-if="loadingTour">
          <p>&nbsp;</p>
          <p localize="Loading tour..."></p>
          <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer" style="border: none">
        <div class="pull-left">
          <div class="checkbox pull-left">
            <label data-ng-class="iswebclientHome ? 'checked' : ''">
              <input type="checkbox" ng-model="iswebclientHome" ng-change="homePrefChange(iswebclientHome)" />
              <span localize="Show the web client as WWT landing page"></span>
            </label>
          </div>

          <div class="clear"></div>

          <div class="checkbox pull-left">
            <label data-ng-class="hideIntroModal ? 'checked' : ''">
              <input type="checkbox" ng-model="hideIntroModal" ng-change="hideIntroModalChange(hideIntroModal)" />
              <span localize="Do not show me this dialog again"></span>
            </label>
          </div>
        </div>

        <a class="btn" ng-click="tourFeatures()">Tour WWT Features</a>

        <button type="button" class="btn" data-dismiss="modal" id="btnCloseIntro" style="width:80px" localize="Close"></button>
      </div>
    </div>
  </div>
</div>

<a href="javascript:void(0)" data-toggle="modal" data-target="#introModal" id="introModalLink">&nbsp;</a>
